<script setup lang="ts" name="canvan-move-block">
import useDragSeriesStore from '@/store/modules/dragSeries'
const dragSeriesStore = useDragSeriesStore()
const props = defineProps(['cfg'])
/*========================================>( 模板属性 )<========================================*/
const width = ref<number>(0)
const height = ref<number>(0)
const left = ref<number>(0)
const top = ref<number>(0)
const img = ref<string>('')
/*========================================>( dom属性 )<========================================*/
const cvmblock = ref()
const cvmscreen = ref()
/*========================================>( 钩子 )<========================================*/
onMounted(() => {
    //1.初始化方块
    width.value = props.cfg.width
    height.value = props.cfg.height
    top.value = props.cfg.initMouseY - props.cfg.height / 2
    left.value = props.cfg.initMouseX - props.cfg.width / 2
    img.value = props.cfg.img
    cvmscreen.value.addEventListener("mousemove", (e: any) => {
        top.value = e.clientY - height.value / 2
        left.value = e.clientX - width.value / 2
    })
    cvmscreen.value.addEventListener("mouseup", (e: any) => {
        dragSeriesStore.clearDragBlock()
        setTimeout(() => {
            dragSeriesStore.clearSeriesId()
        }, 50);
    })
})
</script>
<template>
    <div>
        <div ref="cvmblock" class="cvmblock" :style="{
            width: width + 'px',
            height: height + 'px',
            top: top + 'px',
            left: left + 'px'
        }"></div>
        <div ref="cvmscreen" class="cvmscreen"></div>
    </div>
</template>
<style lang="scss"></style>
<style lang="scss" scoped>
.cvmblock {
    position: absolute;
    opacity: 0.5;
    background-size: 100% 100%;
    border: solid 2px #ccc;
    background: linear-gradient(45deg,
            #e1e1e1 25%,
            #666 0,
            #666 50%,
            #e1e1e1 0,
            #e1e1e1 75%,
            #666 0);
    background-size: 50px 50px;
}

.cvmscreen {
    cursor: url("/icon/closeHand.png"), auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>